import React from "react"
import { Image } from 'react-bootstrap';
import './Header.css'

export default class Header extends React.Component {
  constructor() {
    super();
    this.state = { navIdx: 0 };
  }

  selectNav = (e) => {
    this.setState({ navIdx: e })
  }

  connectWallet = (e) => {
    alert('building...')
  }

  render() {
    return (
      <div className="header">
        <div className='header-nav'>
          <a className={this.state.navIdx === 0 ? 'header-nav-item-active' : 'header-nav-item'} href='#home' onClick={() => { this.selectNav(0) }}>Home</a>
          <a className={this.state.navIdx === 1 ? 'header-nav-item-active' : 'header-nav-item'} href='#howToWin' onClick={() => { this.selectNav(1) }}>How to Win</a>
          <a className={this.state.navIdx === 2 ? 'header-nav-item-active' : 'header-nav-item'} href='#roadmap' onClick={() => { this.selectNav(2) }}>Roadmap</a>
          <a className={this.state.navIdx === 3 ? 'header-nav-item-active' : 'header-nav-item'} href='#faq' onClick={() => { this.selectNav(3) }}>FAQ</a>
        </div>
        <div className='header-right'>
          <div className='header-social-images'>
            <a href="https://discord.gg/tqRnbAqZuY" target="_blank" rel="noopener noreferrer">
              <Image className='header-social-img' src="images/social/social_0.png" />
            </a>

            <Image className='header-social-img' src="images/social/social_1.png" />

            <a href="https://twitter.com/MissionZella" target="_blank" rel="noopener noreferrer">
              <Image className='header-social-img' src="images/social/social_2.png" />
            </a>

            <Image className='header-social-img' src="images/social/social_3.png" />
          </div>
          <div className="header-connect-wallet" onClick={() => { this.connectWallet() }}>Connect Wallet</div>
        </div>
      </div >
    )
  }
}